<template>
    <div class="pd-20 feedback">
        <a-button type="primary" @click="goBack"><arrow-left-outlined />返回</a-button>
        <div class="feedback-box">
            <div class="feedback-top">
                <h3 class="flex-center mb-40">{{ feedbackData?.mname }}</h3>
                <div class="fs-17 flex-around">
                    <div>面试者：{{ feedbackData?.uname }}</div>
                    <div>反馈时间：{{ feedbackData?.update_time }}</div>
                    <div>综合评分：<span class="overall-score">{{ route.query.averageScore }}</span></div>
                </div>
            </div>
            <div class="feedback-content">
                <div ref="pieChart" style="width: 600px; height: 400px;"></div>
                <!-- <div v-for="(item, index) in feedbackData.evoluation" :key="index" class="feedback-module">
                    <div class="score">
                        {{ item.averageScore }} 
                    </div>
                    <div class="feedback-module-detail" v-for="(item2, index2) in item.details" :key="index2">
                        <div class="mt-30">{{ item2.desc }}</div>
                        <div class="flex rate"> <a-rate v-model:value="item2.score" allow-half disabled />
                            <div class="detail-score">{{ item2.score }}</div>
                        </div>
                    </div>
                    <div class="flex-center detial-name">{{ item.name }}</div>
                </div> -->
            </div>
        </div>

    </div>
</template>

<script setup>
import { onMounted, onBeforeMount, reactive, ref, onUnmounted, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ArrowLeftOutlined } from '@ant-design/icons-vue'
import { getEvaluationByEid } from '../apis/api/home'
import dayjs from 'dayjs'
// import { Evaluation } from '../apis/types/home'

import * as echarts from 'echarts'
const chartData = ref([])
const route = useRoute()
const router = useRouter()

const feedbackId = route.query.id // 获取传递的 id
//模拟反馈数据
const feedbackData = ref({
    // mname: '',
    // evoluation: [],
    // uname: '',
    // update_time: ''
})
onBeforeMount(() => {
    
})
onMounted(async () => {
    await getEvaluationByEid({
        interviewId: feedbackId
    }).then(res => {
        const data = res.data.data[0]
        data.evoluation = JSON.parse(data.evoluation).score
        data.update_time = dayjs(data.update_time).format('YYYY-MM-DD HH:mm:ss')
        feedbackData.value = data
        chartData.value = data.evoluation.map(item => ({
            value: item.score.toFixed(2),
            name: item.desc
        }))
    })
    await initChart()
    window.addEventListener('resize', handleResize)
})
onUnmounted(() => {
    chartInstance?.dispose()
    window.removeEventListener('resize', handleResize)
})
const goBack = () => {
    router.go(-1) // 返回到来时的页面
}

const pieChart = ref(null)
let chartInstance = null

// 生成渐变色数组
const generateColors = (length) => {
    // 基础颜色数组
    const baseColors = [
        '#006EFF',  // 腾讯蓝
        '#36BFFA',  // 浅蓝
        '#5D7092',  // 灰蓝
        '#7A5AF8',  // 紫色
        '#22C55E',  // 绿色
        '#10B981',  // 翠绿
        '#2563EB',  // 深蓝
        '#4F46E5',  // 靛蓝
        '#7C3AED',  // 紫罗兰
        '#EC4899'   // 粉色
    ]

    // 如果数据量小于等于基础颜色数量，直接返回对应数量的颜色
    if (length <= baseColors.length) {
        return baseColors.slice(0, length)
    }

    // 如果数据量大于基础颜色数量，则通过插值生成更多颜色
    const colors = [...baseColors]
    while (colors.length < length) {
        const index = colors.length % baseColors.length
        colors.push(baseColors[index])
    }
    return colors
}

const initChart = async () => {
    await nextTick()
    if (!pieChart.value) return

    chartInstance = echarts.init(pieChart.value)

    const option = {
        backgroundColor: 'transparent',
        tooltip: {
            trigger: 'item',
            formatter: '{b}: {c}分 ({d}%)'
        },
        title: {
            text: '能力测试评分分布',
            left: '5%',
            top: 0,
            textStyle: {
                color: '#E6EAF2'
            }
        },
        legend: {
            orient: 'vertical',
            right: '5%',
            top: 'center',
            textStyle: {
                color: '#E6EAF2'
            }
        },
        series: [
            {
                name: '评分分布',
                type: 'pie',
                radius: ['40%', '70%'],
                center: ['40%', '50%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#1a1d2b',
                    borderWidth: 2
                },
                label: {
                    show: true,
                    color: '#E6EAF2',
                    formatter: '{b}\n{c}分'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '16',
                        fontWeight: 'bold'
                    },
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                data: chartData.value,
                // 动态生成颜色数组
                color: generateColors(feedbackData.value.evoluation?.length)
            }
        ]
    }

    chartInstance.setOption(option)
}

// 监听窗口大小变化
const handleResize = () => {
    chartInstance?.resize()
}

</script>

<style lang="scss" scoped>
.feedback {
    min-width: 1400px;
    // background-color: rgba(35, 39, 47, 0.6);
    margin: 0 auto;

    .feedback-box {
        width: 90%;
        margin: 0 auto;

        .overall-score {
            color: #52c41a;
            font-size: 30px;
            font-weight: 700;
            // font-family: electronicFont;
        }

        .feedback-content {
            margin-left: 120px;
            margin-top: 30px;
            display: flex;
            justify-content: center;

            .pie-chart {
                width: 100%;
                height: 100%;
            }

            // .feedback-module {
            //     margin-right: 40px;
            //     width: 300px;
            //     height: 350px;
            //     max-height: 350px;
            //     overflow-y: auto;
            //     background-color: rgba(35, 39, 47, 0.6);
            //     border: rgba(35, 39, 47, 0.6);
            //     border-radius: 15px;
            //     position: relative;

            //     .score {
            //         color: #52c41a;
            //         font-size: 28px;
            //         font-weight: 700;
            //         padding-right: 10px;
            //         display: flex;
            //         justify-content: end;
            //     }

            //     .feedback-module-detail {
            //         padding: 0 15px;

            //         .rate {
            //             height: 27px;
            //             line-height: 27px;

            //             .detail-score {
            //                 margin: 0;
            //                 margin-top: 5px;
            //                 margin-left: 10px;
            //             }
            //         }


            //     }

            //     .detial-name {
            //         position: absolute;
            //         height: 50px;
            //         line-height: 50px;
            //         font-weight: 600;
            //         width: 100%;
            //         bottom: 0;
            //         left: 0;
            //         margin: 0;
            //         border-radius: 0 0 15px 15px;
            //         background: linear-gradient(90deg, #6772FF 0%, #00F9E5 100%);
            //     }
            // }

            // .feedback-module:hover {
            //     box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
            //     transform: translateY(-5px);
            //     transition: all 0.3s ease;
            //     cursor: pointer;
            // }
        }

        .feedback-content div {
            margin: 10px 0;
        }
    }
}
</style>